<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Treasure Hunter</title>
</head>
<body>
    <script src="./pixi.min.js"></script>
    <script src="functions.js"></script>
    <script>
        
        //Aliases
        let Application = PIXI.Application,
            ontainer = PIXI.Container,
            loader = PIXI.loader,
            resources = PIXI.loader.resources,
            TextureCache = PIXI.utils.TextureCache,
            Sprite = PIXI.Sprite,
            Graphics = PIXI.Graphics,
            Rectangle = PIXI.Rectangle,
            TextStyle = PIXI.TextStyle,
            Container = PIXI.Container,
            Text = PIXI.Text;
            

        //Create a Pixi Application
        let app = new Application({
            width: 512,
            height: 512,
            antialiasing: true, 
            transparent: false, 
            resolution: 1
        });
        document.body.appendChild(app.view);
        

        // Load picture
        loader
            .add("images/treasureHunter.json")
            .load(setup);
        // resources
        let treasure, explorer, dungeon, door, blobs, chimes, exit, player,
            healthBar, enemies;
        // scenes
        let gameScene, gameOverScene;
        // others
        let state, id, message;
        let collision = undefined;

        function setup(){
            // Game scene
            gameScene = new Container();
            app.stage.addChild(gameScene);

            // Spirits
            id = PIXI.loader.resources["images/treasureHunter.json"].textures;
            
            // Dungeon
            dungeon = new Sprite(id["dungeon.png"]);
            gameScene.addChild(dungeon);

            // Door
            door = new Sprite(id["door.png"]);
            door.position.set(32, 0);
            gameScene.addChild(door);

            // Explorer
            explorer = new Sprite(id["explorer.png"]);
            explorer.x = 68;
            explorer.y = gameScene.height / 2 - explorer.height / 2;
            explorer.vx = 0;
            explorer.vy = 0;
            gameScene.addChild(explorer);

            // Treasure
            treasure = new Sprite(id["treasure.png"]);
            treasure.x = gameScene.width - treasure.width - 48;
            treasure.y = gameScene.height / 2 - treasure.height / 2;
            gameScene.addChild(treasure);

            // Make the blobs
            let numberOfBlobs = 6,
                spacing = 48,
                xOffset = 150,
                speed = 2,
                direction = 1;

            // An array to store all the blob monsters
            blobs = [];

            // Make as many blobs as there are `numberOfBlobs`
            for (let i =0; i<numberOfBlobs; i++) {
                // Make a blob
                let blob = new Sprite(id["blob.png"]);

                let x = spacing * i + xOffset;

                let y = randomInt(0, app.stage.height - blob.height);

                // Set the blob's position
                blob.x = x;
                blob.y = y;

                blob.vy = speed * direction;

                // Reverse the direction
                direction *= -1;

                // Push the blob into the `blobs` array
                blobs.push(blob);

                // Add the blob to the `gameScene`
                gameScene.addChild(blob);

            }

            // Create the health bar
            healthBar = new Container();
            healthBar.position.set(app.stage.width - 170, 4)
            gameScene.addChild(healthBar);

            // Create the black background rectangle
            let innerBar = new Graphics();
            innerBar.beginFill(0x000000);
            innerBar.drawRect(0, 0, 128, 8);
            innerBar.endFill();
            healthBar.addChild(innerBar);

            // Create the front red rectangle
            let outerBar = new Graphics();
            outerBar.beginFill(0xFF3300);
            outerBar.drawRect(0, 0, 128, 8);
            outerBar.endFill();
            healthBar.addChild(outerBar);

            healthBar.outer = outerBar;


            // Game OVer Scene
            gameOverScene = new Container();
            app.stage.addChild(gameOverScene);

            gameOverScene.visible = false;

            // Create the text
            let style = new TextStyle({
                fontFamily: "Futura",
                fontSize: 64,
                fill: "white"
            });
            message = new Text("The End!", style);
            message.x = 120;
            message.y = app.stage.height / 2 -32;
            gameOverScene.addChild(message);
            
            // Capture the keyboard arrow keys
            let left = keyboard(37),
                up = keyboard(38),
                right = keyboard(39),
                down = keyboard(40);
            
            // Left press and release
            left.press = () => {
                explorer.vx = -5;
                explorer.vy = 0;
            };

            left.release = () => {
                if(!right.isDown && explorer.vy === 0) {
                    explorer.vx = 0;
                }
            };

            //Up
            up.press = () => {
                explorer.vy = -5;
                explorer.vx = 0;
            };
            up.release = () => {
                if(!down.isDown && explorer.vx === 0) {
                    explorer.vy = 0;
                }
            };

            //right
            right.press = () => {
                explorer.vx = 5;
                explorer.vy = 0;
            };

            right.release = () => {
                if(!left.isDown && explorer.vy === 0) {
                    explorer.vx = 0;
                }
            };

            //Down
            down.press = () => {
                explorer.vy = 5;
                explorer.vx = 0;
            };
            down.release = () => {
                if(!up.isDown && explorer.vx === 0) {
                    explorer.vy = 0;
                }
            };

            // Set game state
            state = play;

            // Start the game loop by adding the `gameLoop` function to
            // Pixi's `ticker` and providing it with a `delta` argument.
            app.ticker.add(delta => gameLoop(delta));


        };
    
        function gameLoop(delta){
            // Update the current game state:            
            state(delta);
            
        }

        function play(delta) {
            explorer.x += explorer.vx;
            explorer.y += explorer.vy;
            
            //Contain the explorer inside the area of the dungeon
            contain(explorer, {x: 28, y: 10, width: 488, height: 480});
            
            let explorerHit = false;

            blobs.forEach(function(blob) {
                blob.y += blob.vy;

                let blobHitsWall = contain(blob, {x: 28, y: 10, width: 488, height: 480});
                
                if (blobHitsWall === "top" || blobHitsWall === "bottom") {
                blob.vy *= -1;
                }
                //Test for a collision. If any of the enemies are touching
                //the explorer, set `explorerHit` to `true`
                if(hitTestRectangle(explorer, blob)) {
                    explorerHit = true;
                }
            });
            if (explorerHit) {
                explorer.alpha = 0.5;
                healthBar.outer.width -= 1;
            } else {
                explorer.alpha = 1;
            }
            
            //Check for a collision between the explorer and the treasure
            if (hitTestRectangle(explorer, treasure)) {
            //If the treasure is touching the explorer, center it over the explorer
            treasure.x = explorer.x + 8;
            treasure.y = explorer.y + 8;
            }

            // Check player's health
            if (healthBar.outer.width < 0) {
                state = end;
                message.text = "You lost!";
            }

            // Check player get the treasure out
            if (hitTestRectangle(treasure, door)) {
                state = end;
                message.text = "You won!";
            }

        }

        function end() {
            gameScene.visible = false;
            gameOverScene.visible = true;
        }
    
    </script>
</body>
</html>